<template>
  <!-- 头部navbar -->
    <van-nav-bar left-arrow fixed @click-left="$router.back()">
      <template #right>
        <van-icon name="search" size="18" />
        <van-icon v-if="likeLoading" @click="liking" name="like-o" />
        <van-icon v-else name="like" @click="liking" color="#ffab09"/>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>

    <!-- 内容模块 -->
    <div class="profile-container">
        <van-image
          width="100%"
          height="200"
          fit="cover"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <!-- 店铺信息 -->
        <van-cell-group inset class="store-profile">
          <van-cell title="单元格" value="内容" >
            <template #title >
                <div class="title">茶百道qqqqqqqqqqqqqqqqqqqq</div>
                <div class="describe">
                    <span class="score">4.7分</span>
                    <span class="distribution">蜂鸟专送</span>
                    <span class="time-sale">约31分钟 · 月售123 · 售后无忧</span>
                </div>
            </template>
            <template #label>
                <p class="notice">公告：NoticeNoticeNoticeNoticeNoticeNoticeNoticeNoticeNoticeceNoticeNoticeNotice</p>
                <ul class="discount">
                    <li>满26减4 <span>|</span> </li>
                    <li>满26减10 <span>|</span> </li>
                    <li>满26减4</li>
                </ul>
            </template>
            <template #value >
                <van-image
                  width="50"
                  height="50"
                  fit="cover"
                  class="img"
                  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />
            </template>
          </van-cell>
        </van-cell-group>

        <!-- tab栏模块 -->
        <van-tabs v-model:active="active" shrink>
          <van-tab title="点餐">
            <!-- 点餐组件 -->
            <ProfileOrder />
          </van-tab>
          <van-tab title="评论">
            <!-- 评论组件 -->
            <ProfileComment />
          </van-tab>
          <van-tab title="商家">
            <!-- 商家组件 -->
            <ProfileStore />
          </van-tab>
          <template #nav-right>
            <van-button plain round type="primary">好友拼单</van-button>
          </template>
        </van-tabs>
    </div>
</template>

<script setup>
import { defineComponent, ref } from 'vue'
import ProfileOrder from './components/profile-order.vue'
import ProfileComment from './components/profile-comment.vue'
import ProfileStore from './components/profile-store.vue'
defineComponent({
  name: 'ProfileIndex'
})

// 控制收藏图标
const likeLoading = ref(true)
const liking = () => {
  likeLoading.value = !likeLoading.value
}

const active = ref(0)
</script>

<style scoped lang="less">
:deep(.van-badge__wrapper) {
    margin-left: 40px;
    color: #fff;
    font-size: 48px !important;
}

:deep(.van-icon-arrow-left) {
    margin-left: 0;
}
.van-nav-bar {
    background-color: rgba(0, 0, 0, 0);
}
.van-hairline--bottom:after {
    border: none;
}

.profile-container {
    position: relative;
    background-color: #fff;
    .store-profile {
        transform: translateY(-125px);
        box-shadow: 0px 5px 10px #ccc;
        :deep(.van-cell__title) {
            flex: unset;
            width: 520px;
        }
        :deep(.van-cell__value) {
            flex: unset;
        }
        .title {
            color: #000;
            font-size: 48px;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .describe {
            margin: 10px 0;
            font-size: 24px;
            .score {
                color: #ffab09;
                margin-right: 8px;
            }
            .distribution {
                color: #0a92e7;
                padding: 2px;
                margin-right: 8px;
                border: 1px solid #0a92e7;
                border-radius: 6px;
            }
        }
        .notice {
            width: 620px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .discount {
            display: inline-block;
            color: #ff692d;
            padding: 4px 12px;
            margin-top: 10px;
            border: 1px solid #ff692d;
            border-radius: 12px;
            li {
              float: left;
              margin-right: 10px;
            }
        }
        .img {
            flex: unset;
        }
    }
}

.van-tabs {
    top: -90px;
    :deep(.van-tab--shrink) {
        margin: 0 40px;
    }
    .van-button--plain.van-button--primary {
        width: 200px;
        height: 60px;
        right: -20px;
        top: 14px;
    }
}
</style>
